<template>
  <div v-if="proxy.isAuth(['ROOT', 'ORDER:SELECT'])">
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="form">
      <el-form-item prop="code">
        <el-input v-model="dataForm.code" placeholder="套餐编号" maxlength="26" class="input" clearable/>
      </el-form-item>
      <el-form-item prop="keyword">
        <el-input v-model="dataForm.keyword" placeholder="套餐名称" maxlength="50" class="keyword" clearable/>
      </el-form-item>
      <el-form-item prop="tel">
        <el-input v-model="dataForm.tel" placeholder="电话号码" maxlength="11" class="input" clearable/>
      </el-form-item>
      <el-form-item class="range">
        <el-date-picker
            v-model="dataForm.dateRange"
            type="daterange"
            start-placeholder="起始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="~"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.status" class="input" placeholder="订单状态" clearable>
          <el-option label="未付款" value="1"/>
          <el-option label="已关闭" value="2"/>
          <el-option label="已付款" value="3"/>
          <el-option label="已退款" value="4"/>
          <el-option label="已预约" value="5"/>
          <el-option label="已结束" value="6"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   v-if="proxy.isAuth(['ROOT','ORDER:UPDATE'])" :icon="Refresh"
                   @click="checkPaymentResultHandle()">同步付款结果
        </el-button>
        <el-button type="primary" @click="searchHandle()">查询</el-button>
        <el-button type="primary"
                   :disabled="!proxy.isAuth(['ROOT','ROLE:INSERT'])"
                   @click="addHandle()">
          新增
        </el-button>
        <el-button type="danger"
                   :disabled="!proxy.isAuth(['ROOT','ROLE:DELETE'])"
                   @click="deleteHandle()">
          批量删除
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="data.datalist"
        :header-cell-style="{'background': '#f5f7fa'}"
        border
        :loading="data.loading"
        @selection-change="selectionChangeHandle"
        @expand-change="expand"
        :row-key="data.getRowKeys"
        :expand-row-keys="data.expands"
    >
      <el-table-column type="expand">
        <div class="content-container">
          <div class="left-panel">
            <el-card class="box-cand" shadow="never">
              <div class="info">
                <div class="left">
                  <el-avatar :size="57" shape="square" :src="scope.row.photo">
                    <el-icon size="35">
                      <UserFilled/>
                    </el-icon>
                  </el-avatar>
                </div>
                <div class="right">
                  <h4 class="customer-name">{{ scope.row.name }}</h4>
                  <p class="customer-desc">
                    <el-icon class="icon">
                      <User/>
                    </el-icon>
                    <span class="value">{{ scope.row.sex }}</span>
                    <el-icon class="icon">
                      <Phone/>
                    </el-icon>
                    <span class="value">{{ scope.row.tel }}</span>
                    <el-icon class="icon">
                      <Calendar/>
                    </el-icon>
                    <span class="value">{{ scope.row.registerTime }}</span>
                  </p>
                </div>
              </div>
              <el-divider/>
              <el-row :gutter="16">
                <el-col :span="6">
                  <div class="statistic-card">
                    <el-statistic
                        :value="scope.row.number - scope.row.num"
                        :suffix="scope.row.suffix">
                      <template #title>
                        <div class="title">可预约体检</div>
                      </template>
                    </el-statistic>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="statistic-card">
                    <el-statistic :value="scope.row.number" :suffix="'↑'">
                      <template #title>
                        <div class="title">总计数量</div>
                      </template>
                    </el-statistic>
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <el-descriptions :column="1" class="order-code" border>
              <el-descriptions-item label="订单编号" label-align="center">
                {{ scope.row.outTradeNo }}
              </el-descriptions-item>
              <el-descriptions-item label="付款编号" label-align="center">
                {{ scope.row.transactionId === null ? '元' : scope.row.transactionId }}
              </el-descriptions-item>
              <el-descriptions-item label="退款编号" label-align="center">
                {{ scope.row.outRefundNo === null ? '元' : scope.row.outRefundNo }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="right-panel">
            <el-table :data="data.appointment" :header-cell-style="{'background': '#f5f7fa'}" height="350" border>
              <el-table-column label="号" type="index" label-align="center" align="center" min-width="90">
                <template #default="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="华也人" label-align="center" align="center" min-width="180"/>
              <el-table-column prop="sex" label="性别" label-align="center" align="center" min-width="120"/>
              <el-table-column prop="age" label="年龄" label-align="center" align="center" min-width="120"/>
              <el-table-column prop="tel" label="电话" label-align="center" align="center" min-width="180"/>
              <el-table-column prop="date" label="体检日" label-align="center" align="center" min-width="180"/>
              <el-table-column prop="status" label="状态" label-align="center" align="center" min-width="130"/>
            </el-table>
          </div>
        </div>

      </el-table-column>
      <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
          :selectable="selectable"
      />
      <el-table-column
          type="index"
          header-align="center"
          align="center"
          width="100"
          label="序号"
      >
        <template #default="{ scope }">
          <span>{{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="goodsTitle"
          header-align="left"
          align="left"
          min-width="220"
          label="套餐名称"
      />
      <el-table-column prop="number" header-align="center" align="center" min-width="180" label="数量"/>
      <el-table-column header-align="center" align="center" min-width="100" label="总计">
        <template #default="{ scope }">
          <span>￥{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" header-align="center" align="center" min-width="100" label="状态"/>
      <el-table-column prop="createTime" header-align="center" align="center" min-width="100" label="下单时间"/>
      <el-table-column prop="refundTime" header-align="center" align="center" min-width="100" label="退款时间"/>
      <el-table-column header-align="center" align="center" width="200" label="操作">
        <template #default="{ scope }">
          <el-button
              type="text"
              v-if="proxy.isAuth(['ROOT', 'ORDER:SELECT'])"
              @click="viewHandle(scope.row.snapshotId)"
          >
            预览
          </el-button>

          <el-button
              type="text"
              v-if="proxy.isAuth(['ROOT', 'ORDER:DELETE'])"
              :disabled="scope.row.status !== '已关闭'"
              @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>

          <el-button
              type="text"
              v-if="proxy.isAuth(['ROOT', 'ORDER:UPDATE'])"
              :disabled="scope.row.status !== '已付款'"
              @click="updateHandle(scope.row.id)"
          >
            线下退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="data.pageIndex"
        :page-size="data.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="data.totalCount"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
<script setup lang="ts">
import {getCurrentInstance, reactive} from "vue";
import router from "../../router";

const {proxy} = getCurrentInstance();
const dataForm = reactive({
  code: null,
  keyword: null,
  tel: null,
  dateRange: [],
  status: null
})
const dataRule = reactive({
  code: [
    {min: 6, message: "编号不能少于6个字符"},
    {pattern: '^[a-zA-Z0-9]{6,20}$', message: '编号格式错误'}
  ],
  keyword: [
    {pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,50}$', message: '名称格式错误'}
  ],
  tel: [
    {pattern: "^1[1-9]\\d{9}$", message: "电话号码格式错误"}
  ]
});
const data = reactive({
  dataList: [],
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  loading: false,
  selections: [],
  expands: [],
  getRowKeys(row) {
    return row.id;
  },
  appointment: []
})

function loadDataList() {
  data.loading = true;

  let range = dataForm.dateRange || [];

  let json = {
    page: data.pageIndex || 1,
    length: data.pageSize || 10,
    keyword: dataForm.keyword || '',
    code: dataForm.code || '',
    tel: dataForm.tel || '',
    status: dataForm.status || '',
    startDate: (range != null && range.length == 2) ? range[0] : null,
    endDate: (range != null && range.length == 2) ? range[1] : null,
  };
  proxy.$http('/mis/order/searchByPage', 'POST', json, true, function (resp) {
    let list = page.list;

    let statusEnum = {
      "1": "未付款",
      "2": "已关闭",
      "3": "已付款",
      "4": "已退款",
      "5": "已预约",
      "6": "已结束"
    };

    // 遍历列表，转换状态
    for (let one of list) {
      one.status = statusEnum[String(one.status)] || '未知状态'; // 使用 `String()` 转换状态为字符串，并提供默认值
    }
    let page = resp.page; // 修正变量名
    data.datalist = page.list;
    data.totalCount = page.totalCount;
    data.loading = false;
  });
}

function searchHandle() {
  proxy.$refs['form'].validate(valid => {
    if (valid) {
      proxy.$refs['form'].clearValidate();

      if (dataForm.keyword) dataForm.keyword = null;
      if (dataForm.code) dataForm.code = null;
      if (dataForm.tel) dataForm.tel = null;
      if (dataForm.status === '') dataForm.status = null;

      if (data.pageIndex !== 1) {
        data.pageIndex = 1;
      }
      loadDataList();
    } else {
      return false;
    }
  });
}

function sizeChangeHandle(val) {
  data.pageSize = val;
  data.pageIndex = 1;
  loadDataList();
}

function currentChangeHandle(val) {
  data.pageSize = val;
  data.pageIndex = 1;
  loadDataList();
}

function expand(row, expandedRows) {
  // 如果有展开的行，先把所有展开的面板收起
  if (expandedRows.length > 0) {
    data.expands = []; // 清空展开的数据
  }
  if (row) {
    data.appointment = []; // 清空当前的 appointment 数据
    let json = {
      orderId: row.id
    };
    proxy.$http("/mis/appointment/searchByOrderId", "POST", json, function (resp) {
      let result = resp.result;
      let statusEnum = {
        "1": "未签到",
        "2": "已签到",
        "3": "已结束",
        "4": "已关闭"
      };
      for (let one of result) {
        one.status = statusEnum[one.status + ""] || one.status;
      }
      data.appointment = result;
    });
    data.expands.push(row.id);
  } else {
    data.expands = [];
  }
}

function viewHandle(snapshotId) {
  router.push({
    name: "FrontGoodsSnapshot",
    param: {
      id: snapshotId,
      mode: 'mis'
    }
  })
}

function selectable(row, index) {
  if (['未付款', '已关闭'].includes(row.status)){
    return true;
  }
  return false;
}

function selectionChangeHandle(val) {
  data.selections = val;
}

function checkPaymentResultHandle() {
  // 提取选中订单记录的订单流水号
  let outTradeNoArray = data.selections.map(item => {
    return item.outTradeNo;
  });

  // 检查 outTradeNoArray 是否为空
  if (!outTradeNoArray || outTradeNoArray.length === 0) {
    proxy.$message({
      message: '没有选中记录',
      type: 'error',
      duration: 1280
    });
    return;
  }

  // 构造 JSON 对象
  let json = {
    outTradeNoArray: outTradeNoArray
  };
  proxy.$http('/mis/order/checkPaymentResult', 'POST', json, true, function (resp) {
    if (resp.rows > 0) {
      proxy.$message({
        message: `成功同步了 ${resp.rows} 条付款记录`,
        type: "success",
        duration: 1200,
        onClose: () => {
          loadDataList();
        }
      });
    } else {
      proxy.$message({
        message: "没有查询到这些订单付款成功",
        type: 'warning',
        duration: 1200
      });
    }
  });
}

function deleteHandle(id) {
  proxy.$confirm("确定要删除这条订单记录?", "提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let json = {"id": id};
    proxy.$http("/mis/order/deleteById", 'POST', json, true, function (resp) {
      if (resp.rows > 0) {
        proxy.$message({
          message: `操作成功`,
          type: 'success',
          duration: 1200,
          onClose: () => {
            loadDataList(); // 假设这个函数重新加载数据列表
          }
        });
      } else {
        proxy.$message({
          message: '未能删除记录',
          type: 'warning',
          duration: 1200
        });
      }
    });
  }).catch(() => {
    // 取消删除的操作
    proxy.$message({
      message: '已取消删除',
      type: 'info',
      duration: 1200
    });
  });
}

function updateHandle(id) {
  proxy.$confirm("确定该订单已经线下退款成功?", "提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let json = {"id": id};
    proxy.$http("/mis/order/updateRefundStatusById", 'POST', json, true, function (resp) {
      if (resp.rows > 0) {
        proxy.$message({
          message: '操作成功',
          type: 'success',
          duration: 1200,
          onClose: () => {
            loadDataList(); // 假设这个函数用于重新加载数据列表
          }
        });
      } else {
        proxy.$message({
          message: "未能更新订单状态",
          type: 'warning',
          duration: 1200,
          onClose: () => {
            loadDataList();
          }
        });
      }
    });
  }).catch(() => {
    // 用户取消操作
    proxy.$message({
      message: '取消了退款操作',
      type: 'info',
      duration: 1200
    });
  });
}


loadDataList();
</script>
<style scoped lang="less">
@import "order";

</style>
